<template>
  <div class="subject-types">
    <a-tag 
      v-for="type in types" 
      :key="type.id"
      :class="[
        `type-${type.id}`,
        { active: selectedType === type.id }
      ]"
      @click="handleSelect(type)"
    >
      {{ type.typeName }}
    </a-tag>
  </div>
</template>

<script>
import { subject } from '@/api/subject'

export default {
  name: 'SubjectTypes',
  data() {
    return {
      types: [],
      selectedType: null
    }
  },
  created() {
    this.fetchTypes()
  },
  methods: {
    async fetchTypes() {
      try {
        const res = await subject.getTypes()
        this.types = res.content
      } catch (error) {
        this.$message.error('获取题目类型失败')
      }
    },
    handleSelect(type) {
      this.selectedType = this.selectedType === type.id ? null : type.id
      this.$emit('type-change', this.selectedType)
    }
  }
}
</script>

<style scoped>
.subject-types {
  display: inline-flex;
  gap: 8px;
}

.ant-tag {
  cursor: pointer;
  margin: 0;
  padding: 4px 12px;
  transition: all 0.3s;
  border: none;
}

/* 简答题 */
.type-1 {
  color: #0891b2;
  background: #ecfeff;
}
.type-1:hover, .type-1.active {
  color: #fff;
  background: #06b6d4;
}

/* 选择题 */
.type-2 {
  color: #db2777;
  background: #fce7f3;
}
.type-2:hover, .type-2.active {
  color: #fff;
  background: #ec4899;
}
</style> 